<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jquery过滤</title>
    <script src="jquery-2.2.4.js"></script>
</head>
<body>
<div class="container">
    <nav>
        <ul>
            <li><a herf="/" class="a1">首页</a></li>
            <span>我是span</span>
            <span>我是span</span>
            <p>我是段落</p>
            <li><a href="/about" class="a2">公司简介</a></li>
            <span>我是span</span>
            <li><a href="/news" class="a3">公司新闻</a></li>
            <li><a href="/products" class="a4">产品介绍</a></li>
            <li><a href="/connect" class="a5">联系我们</a></li>
        </ul>
    </nav>
    <div class="main">
        <p class="p1">段落1</p>
        <p class="p2">段落2</p>
        <p class="p3">段落3</p>
        <p class="p4">段落4</p>
        <p class="p5">段落5</p>
    </div>
    <footer>
        <ul>
            <li class="d1">产品1</li>
            <li class="d2">产品2</li>
            <li class="d3">产品3</li>
            <li class="d4">产品4</li>
        </ul>
    </footer>
</div>

</body>
</html>
<script>
    $(function(){
//        $('.main  p').add('footer ul li').css('color','red');
////      $('footer ul li ').css('color','red')
//        $('.main').contents()
//        $('.main').contents().filter(function(){
//            return this.nodeType !=1;
//        })
        //遍历函数
        $('footer ul li').each(function(index){
            //每一个元素下表
//            alert(index)
            //每一个元素
            alert($(this));
            $(this).click(function(){
                alert(index);

                //要操作的$(this)
                //要操作的元素下标

            })


        })
    })

</script>
<!--当我们选择完DOM集合的时候-->
<!--一定会用循环遍历的方式来操作的，-->
<!--遍历放在过滤后面考虑-->